<template>
  <page-header-wrapper>
    <a-card size="small" title="工具箱">
      <a-row>
        <a-col 
          :xs="6" 
          :sm="4" 
          :md="2" 
          class="flex" 
          v-for="item in list" 
          :key="item.id"
        >
          <div style="text-align: center;width: 100%;margin-bottom: 24px;">
            <div style="height:40px;width: 40px;margin: 0 auto;border-radius: 10px;cursor:pointer" :style="{ background: item.color }" @click="handleDelete()">
              <a-icon type="delete" style="font-size: 24px;line-height: 40px;color: #fff" />
            </div>
            <div style="line-height: 30px;">{{ item.name }}</div>
          </div>
        </a-col>
      </a-row>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'

export default {
  name: 'HomeIndex',
  components: {
    PageHeaderWrapper,
  },
  data () {
    return {
      list: [
        { name: '清除本地存储', id: 1, color: '#f79263' },
      ],
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
    
  },
  methods: {
    handleDelete(){
      const that = this
      that.$confirm({
        title: '清除',
        content: '你确定要清除本地存储吗？',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          that.$message.success('清除成功')
        },
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import './index.less';
.flex{
  display: flex; 
  justify-content: center;
}
.timeline-wrapper{
  flex: 1;
  overflow-y: auto;
  padding: 15px 5px 0 160px;
  .timeline{
    position: relative;
    height: 50px;
    width: 100%;
    &::before{
      content: '';
      position: absolute;
      left: val(--left);
      width: 1px;
      top: 20px;
      bottom: 0;
      background-image: linear-gradient(to bottom,rgba(144, 156, 173, 0.6) 60%,rgba(255, 255, 255, 0) 0%);
      background-position: left;
      background-size: 1px 5px;
      background-repeat: repeat-y;
    }
    .timeline-left {
      display: block;
      width: calc(var(--left) - 7px);
      position: absolute;
      margin-left: -120px;
      text-align: right;
      width: 100px;
      color: #8492a5;
    } 
    .timeline-right {
      position: relative;
      margin: -3px 0 10px 20px;
    } 
    .timeline-dot {
      left: var(--left);
      width: 7px;
      height: 7px;
      position: absolute;
      border-radius: 50%;
      box-shadow: 0 0 0 1px #d8d8d8;
      background: white;
      text-align: center;
      top: 10px;
      line-height: 40px;
      margin-left: -3.5px;
    } 

  }
}
</style>
